<%--
  Created by IntelliJ IDEA.
  User: 小易好晕i
  Date: 2022/10/31
  Time: 15:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <title>购物车</title>
    <style type="text/css">
        h2{
            padding: 10px;
        }
        a{
            text-decoration: none;
        }
        body{
            background-color: #f5f5f5;
        }
        #ace1{
            background-color: #f5f5f5;
            width: 100%;
            height: 100%;
        }
        table{
            background-color: #ffffff;
            margin: 0 auto;
            top: 100px;
            width:90%;
            border-collapse: collapse;
        }
        table th,table td {
            padding: 5px;
        }
        .join{
            display: flex;
            text-align: center;
            width: 130px;
            height: 50px;
            background-color:  #DDDDDD;
            color:white;
            border: 1px solid #DDDDDD;
            float: right;

        }
        :hover.join{
            background-color: greenyellow;
        }
        .join1{
            background-color: #f5f5f5;
            padding: 20px;
            margin: 20px;
            height: 100px;

        }
        .ace2{
            background-color:  #B0B0B0;
        }
        .h{
            margin-left: 800px;
            padding: 35px;
        }
        #aa{
            background-color: white;
            height: 100px;
            display: flex;
            border-bottom: 2px solid greenyellow;
        }
        .purchasenumber {
            width: 100%;
            height: 25%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #f1f1f1;
        }
        .purchasenumber .number i,
        .purchasenumber .number input {
            display: inline-block;
            height: 0.6rem;
            line-height: 0.6rem;
            font-size: 0.2rem;
            text-align: center;
            border: 1px solid #515151;
            color: #323232;
        }
        .purchasenumber .number i {
            width: 0.6rem;
        }
        .purchasenumber .number input {
            width: 0.8rem;
            vertical-align: top;
            margin-left: -0.08rem;
            border-left-style: none;
            box-sizing: content-box;
        }
        .purchasenumber .number .minus {
            border-radius: 0.06rem 0 0 0.06rem;
        }
        .purchasenumber .number .plus {
            margin-left: -0.08rem;
            border-radius: 0 0.06rem 0.06rem 0;
            border-left-style: none;
        }
        th{
            color: #E0E0E0;
        }
        .ace3{
            margin-top: 70px;
        }
        .ace4{
            width:20px;
            height:20px;
            font-size:5px;
            vertical-align:bottom;
        }
        .ace5{
            width:20px;
            height:20px;
            font-size:5px;
            vertical-align:bottom;
        }
        #num{
            box-sizing:border-box;
            height:20px;
            width:20px;
            font-size:10px;
            text-align:center;
        }
    </style>
</head>
<script>
    var all = document.querySelector('#all');
    var inputs = document.querySelectorAll('input');
    // 全选
    all.onclick = function () {
        var tag = this.checked; // 全选的状态

        for (var i = 0; i < inputs.length; i++) {
            inputs[i].checked = tag;
        }
    }
    // 点击单个(开关的方式)
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].onclick = function () {
            var tag = true; // 开关，默认为真
            // 点击单个时，检查每一个是否选中，如果有一个没有选中，则开关为假
            for (var i = 0; i < inputs.length; i++) {
                if (!inputs[i].checked) {
                    tag = false;
                    break;
                }
            }
            all.checked = tag;
        }
    }
</script>
<body>
<div id="aa">
    <img src="image/AG.png" width="180px">
    <h2 style="font-weight: 100; color: orangered;"><i>我的购物车</i></h2>
    <div class="h">
        <a href="index.jsp" style="color: orange;">登录</a>
        <a href="#" style="color: orange;">注册</a>
    </div>
</div>
<div id="ace1">
    <form>
        <div class="ace3">
            <table border="0" style="" cellpadding="0" cellspacing="1">
                <thead>
                <tr>
                    <th> <input type="checkbox"></th>
                    <th>商品</th>
                    <th>商品名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>金额</th>
                    <th>删除</th>
                </tr>
                </thead>
                <tfoot>
                <tr style="text-align: center;">
                    <td><input type="checkbox"></td>
                    <td><img src="image/shouji4.webp" width="80px"></td>
                    <td>Xaomi 11 8GB+128GB 小白裙</td>
                    <td>1999</td>
                    <td><input id="jian" type="button" value="-">
                        <span id="amount">1</span>
                        <input id="jia" type="button" value="+">
                    </td>
                    <td style="color: orange;">1999</td>
                    <td><button>×</button></td>
                </tr>
                </tfoot>

       </table>
        </div>
        <div class="join1">
            <div class="join">
		  <span id="">
		  	合计：
		  <em>0</em>
		  元
		  </span>
                <button type="button" class="join">立即购买</button>
            </div>
        </div>
    </form>
</div>
</body>
<script>
    $(function(){
        $("#jian").on("click",function(){

            $("#amount").text(function(i,n){
                if(n<=1){
                    $("#jian").prop("disabled",true);
                    return
                }
                $(this).text(n-1);
            });
        })

        $("#jia").on("click",function(){
            $("#amount").text(function(i,n){
                $("#jian").prop("disabled",false);
                $(this).text(parseInt(n)+1);
            })
        })
    })

    function add_shoppingcar(btn) {
        var tr = btn.parentNode.parentNode;
        var tds = tr.getElementsByTagName("td");
        var name = tds[0].innerHTML;
        var price = tds[1].innerHTML;
        var tbody = document.getElementById("goods");
        var row = tbody.insertRow();
        row.innerHTML = "<td>"+name+"</td>"+
            "<td>"+price+"</td>"+
            "<td align='center'>"+
            "<input type='button' value='-' onclick='change(this,-1);' />"+
            "<input type='text' id='num' size='1' readonly='readonly' value='1'/>"+
            "<input type='button' value='+' onclick='change(this,+1);' />"+
            "</td>"+
            "<td>"+price+"</td>"+
            "<td align='center'>"+
            "<input type='button' value='X' onclick='del(this);'/>"+
            "</td>";
        total();
    }

    function del(obj) {
        var tr = obj.parentNode.parentNode;
        var tbody = tr.parentNode;
        tbody.removeChild(tr);
        total();
    }

    function total() {
        var tbody = document.getElementById("goods");
        var trs = tbody.getElementsByTagName("tr");
        var sum = 0;
        for(var i=0;i<trs.length;i++){
            var tds = trs[i].getElementsByTagName("td");
            var m = tds[3].innerHTML;
            sum += parseFloat(m);
        }
        var total = document.getElementById("total");
        total.innerHTML = sum;

    }
    function change(btn,n) {
        var inputs = btn.parentNode.getElementsByTagName("input");
        var amount = parseInt(inputs[1].value);
        if(amount<=1 && n<0){
            return;
        }
        inputs[1].value = amount+n;
        amount = inputs[1].value;
        var tr = btn.parentNode.parentNode;
        var tds = tr.getElementsByTagName("td");
        var price = parseFloat(tds[1].innerHTML);
        var m = amount * price;
        tds[3].innerHTML = m;
        total();
    }

</script>
</html>

